import React, {Component} from 'react';
import {Image, StyleSheet, View,} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Tab from './item_page/Home'
import Video from './item_page/Video'
import Media from './item_page/Media'
import Self from './item_page/Self'

/**
 * 第三方控件做的发现路由不行 更换为官方控件
 */
export default class Mian extends Component {
  static navigationOptions = {
    headerBackTitle: null,
    header:null,
    headerTintColor: '#333333',
    gesturesEnabled:true
  };
  constructor(props){
    super(props)
    this.state={
      selectedTab:"Home"
    }
  }
  render() {
    
    return (
      <View style = {styles.container}>
        <TabNavigator>
          {this._renderTabarItems('Home','资讯',require("../image/icon_news_no.png"),require("../image/icon_news.png"),Tab)}
          {this._renderTabarItems('Video','师大影像',require("../image/icon_video_no.png"),require("../image/icon_video.png"),Video)}
          <TabNavigator.Item
            selected={this.state.selectedTab === 'Media'} 
            title="媒体师大"
            titleStyle={styles.tabText} 
            selectedTitleStyle={styles.selectedTabText}  
            renderIcon ={()=><Image style={{width:30,height:20}} source={require("../image/icon_media_no.png")}/>}
            renderSelectedIcon = {()=> <Image style={{width:30,height:20}} source={require("../image/icon_media.png")} />}  
            onPress = {()=>this.setState({selectedTab:"Media"})} >
              <Media  navigation={this.props.navigation} />
          </TabNavigator.Item>
          {this._renderTabarItems('Self','我的',require("../image/icon_my_no.png"),require("../image/icon_my.png"),Self)}
        </TabNavigator>
      </View>
    );
  }
  _renderTabarItems(selectedTab,CurrentTitle,icon,SelectedIcon,Component){
      return(
        <TabNavigator.Item
            selected={this.state.selectedTab === selectedTab} 
            title = {CurrentTitle}
            titleStyle={styles.tabText} 
            selectedTitleStyle={styles.selectedTabText}  
            renderIcon ={()=><Image style={styles.icon} source={icon}/>}
            renderSelectedIcon = {()=> <Image style={styles.icon} source={SelectedIcon} />}  
            onPress = {()=>this.setState({selectedTab:selectedTab})} >
              <Component navigation={this.props.navigation} />
          </TabNavigator.Item>
      )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  tabText: {
    color:'#999999',
    fontSize:10
  },
  selectedTabText:{
    color:'#AC1E1A'
  },
  instructions: {
    textAlign: 'center',
    color: '#FF0000',
    marginBottom: 5,
  },
  icon:{
    width:20,
    height:20
  }
});
